<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人用户界面</title>
    <link href="../css/bootstrap5.3.min.css" rel="stylesheet" type="text/css" />
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
</head>

<body>
    <div class="container">
        <!--        header 头部导航栏-->
        <div id="my_header" class="col-sm-7"> </div> 
        
        <div id="user_info">
            <h2 class="page-header" class="col-sm-7">
                个人信息页面
            </h2>

            <div class="mb-4 row">
                <label for="uid" class="col-sm-4 col-form-label">UID</label>
                <div class="col-sm-8">
                    <input class="form-control"  type="text" id="uid" name="uid" v-model="uid" readonly />
                </div>
            </div>
            <div class="mb-4 row">
                <label for="uid" class="col-sm-4 col-form-label">用户名</label>
                <div class="col-sm-8">
                    <input class="form-control"  type="text" id="name" name="name" v-model="name" />
                </div>
            </div>
            <div class="mb-4 row">
                <label for="uid" class="col-sm-4 col-form-label">个人简介</label>
                <div class="col-sm-8">
                    <input class="form-control"  type="text" id="brief" name="brief" v-model="brief" />
                </div>
            </div>
            <div class="mb-4 row">
                <label for="uid" class="col-sm-4 col-form-label">密码</label>
                <div class="col-sm-8">
                    <input class="form-control"  type="password" id="pwd" name="pwd" v-model="pwd" />
                </div>
            </div> 
           
             

            <div id="modify_div" >
                <button @click="upate_user" type="button" class="btn btn-danger">提交修改</button>
            </div>
        </div>
    </div>
</body>

<script src="../js/jquery-3.6.0.min.js"></script>
<script>
    $(function () {
        $("#my_header").load("../index_header.html");
    });
    function showmess(mess) {
        let div = $("<div class=mymess>" + mess + "</div>");
        $("body").append(div);

        let intv = setInterval(() => {
            let top = div.css("top");
            top = parseInt(top.split("px")[0]);
            if (top > 500) {
                div.remove();
                clearInterval(intv);
            }
            div.css("top", (top + 5) + "px");
            div.css("opacity", 1 - (top / (800.0)));
        }, 17);
    }

    var app = new Vue({
        el: "#user_info",
        data() {
            return {
                uid: '',
                name: "",
                pwd: '',
                brief: ''
            };
        },
        methods: {
            get_my_info() {
                axios.get(  "get_my_info?time=" + Math.random())
                    .then(response => {
                        // 请求成功处理
                        console.log(response.data);  
                        if (response.data.res == "Y") {  
                            this.uid = response.data.uid;  
                            this.name = response.data.name;  
                            this.brief = response.data.brief;  
                        }else{
                            console.log(response.data.res);  
                        }
                    })
                    .catch(error => {
                        // 请求失败处理
                        alert("catch error"); 
                        console.error(error);
                    });
            },
            upate_user(){
                const params = new FormData();
                params.append('uid', this.uid);
                params.append('name', this.name);
                params.append('pwd', this.pwd);
                params.append('brief', this.brief);

                axios.post(  "updateUser" , params)
                    .then(response => {
                        // 请求成功处理 
                        if (response.data  == "succ") {  
                            showmess("修改成功")
                            this.get_my_info()
                        }else{
                            showmess("修改失败")
                            console.log(response.data);  
                        }
                    })
                    .catch(error => {  
                        // 请求失败处理
                        alert("catch error"); 
                        console.error(error);
                    });
            }
        },
        mounted() {

            this.get_my_info();

        },
        beforeDestroy() {

        }
    });




</script>
<style>
    .mymess {
        left: 100px;
        top: 50px;
        position: fixed;
        border: 1px solid #e9c5c5;
        border-radius: 5px;
        text-align: center;
        padding: 10px;
        width: 350px;
        font-size: large;
        color: aliceblue;
        background-color: #000000;
        opacity: 1;
    }
</style>

</html>